<!--课程管理列表-->
<template>
  <div>
    <el-table
      :data="baseData.hot"
      row-key="id"
      min-width="772px"
      tooltip-effect="light"
    >
      <el-table-column type="index" min-width="100px" label="排名" prop="rankImg">
        <template #default="scope">
          <p style="display:flex">
          <img :src="scope.row.rankImg" alt="" style="width: 24px;height:24px"/>
        </p>
        </template>
      </el-table-column>
      <el-table-column
        label="课程分类"
        min-width="220px"
        class-name="textLeft"
        prop="category"
        show-overflow-tooltip="true"
      >
      </el-table-column>
      <el-table-column label="课程名称" min-width="250px" prop="name"  show-overflow-tooltip="true">
      </el-table-column>
      <el-table-column
        prop="newStuNum"
        label="新增学员（人）"
        min-width="122px"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="orderAmount"
        label="课程金额（元）"
        min-width="125px"
        class-name="textLeft"
        align="center"
      >
        <template #default="scope">
          {{ (scope.row.orderAmount/100).toFixed(2) }}
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script setup>
import { reactive, watch } from "vue"

// 接收父级传参
const props = defineProps({
  formData: {
    type: Object,
    default: () => ({}),
  }
})
const baseData = reactive({
  hot: [{
    rankImg:'',
  }],
}) //接收父组件返回的数据
// 创建一个空对象，存储排名图片路径
const rankImg = [
    "",
    "",
    "",
    "",
    "",
    "",
    "",
    "",
    "",
    ""
]
// 监听父组件传值，赋值
watch(props, (newVal, oldVal) => {
  getData()
})
// 监听baseData的变化，变化时，将图片数组赋值给baseData
watch(baseData, (val) => {
  addRankImg()
  // console.log(baseData)
})
// 获取数据
const getData = () => {
  // 将formData中的数据赋值给baseData.hot
  baseData.hot = props.formData
}
// 创建方法，给每个数据添加排名图片路径
const addRankImg = () => {
  baseData.hot.forEach((item, index) => {
    item.rankImg = rankImg[index]
  })
}
</script>
<style lang="scss" scoped>
:deep(.el-table th.el-table__cell > .cell) {
  min-width: 122px;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  font-size: 14px;
  color: #332929;
}
:deep(.el-table th.el-table__cell.is-leaf) {
  border: 0;
}
:deep(.el-table td.el-table__cell) {
  border: 0;
}
:deep(.el-table th.el-table__cell.is-leaf) {
  height: 36px;
  background: #fdfcfa;
  border: 1px solid #f5efee;
  border-left: 0;
  border-right: 0;
  &:first-child {
    border-left: 1px solid #f5efee !important;
    border-radius: 4px;
  }
  &:last-child {
    border-right: 1px solid #f5efee !important;
    border-radius: 4px;
  }
}
:deep(.el-table td.el-table__cell div) {
  font-family: PingFangSC-Regular;
  font-weight: 400;
  font-size: 14px;
  color: #332929;
}
:deep(.el-table:not(.el-table--border) .el-table__inner-wrapper){
  .cell{
    display: flex;
  }
}

:deep(.el-popper.is-light){
  height: 40px;
  line-height: 30px;
  background: #FFFFFF;
  box-shadow: 0 0 8px 1px rgba(0,0,0,0.05);
  font-family: PingFangSC-Regular;
  font-weight: 400;
  font-size: 12px;
  color: #332929;
  border:none;
}
:deep(.el-popper.is-light .el-popper__arrow::popper){
    position: absolute;
    content: '';
    background: #fff;
    width: 50px;
    height: 10px;
    top:0px;
    left: 10px;
}
:deep(.el-table:not(.el-table--border) .el-table__inner-wrapper .cell){
  display: block;
  align-items: center;
}
:deep(.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell){
  background-color: #F7F3F0;
}
:deep(.el-table td.el-table__cell){
  padding: 9px 0;
}
:deep(.el-table tr){
  height: 40px;
}
</style>